<template>
  <div class="staff-detail">
    <!-- 技师基本信息部分 -->
    <section class="staff-header">
      <div class="staff-basic">
        <div class="staff-avatar">
          <img :src="staffInfo.employeePic" :alt="staffInfo.employeeName">
          <span class="staff-level">{{ staffInfo.employeeLevel }}</span>
        </div>
        <div class="staff-info">
          <div class="name-row">
            <h1>{{ staffInfo.employeeName }}</h1>
            <span class="years">从业{{ staffInfo.workYears }}年</span>
          </div>
          <div class="rating-row">
            <div class="rating-stars">
              <i v-for="n in 5" :key="n" class="icon-star" :class="{ active: n <= staffInfo.rating }"></i>
              <span class="rating-score">{{ staffInfo.rating }}分</span>
            </div>
            <span class="comment-count">{{ staffInfo.commentCount }}条评价</span>
          </div>
          <div class="skill-tags">
            <span v-for="skill in staffInfo.skills?.split(',')" :key="skill" class="skill-tag">
              {{ skill }}
            </span>
          </div>
        </div>
        <button class="book-btn">立即预约</button>
      </div>
      
      <!-- 服务数据统计 -->
      <div class="service-stats">
        <div class="stat-item">
          <div class="stat-value">{{ staffInfo.serviceCount }}</div>
          <div class="stat-label">服务人次</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ staffInfo.repeatRate }}%</div>
          <div class="stat-label">回头率</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ staffInfo.satisfactionRate }}%</div>
          <div class="stat-label">满意度</div>
        </div>
      </div>
    </section>

    <!-- 技师介绍 -->
    <section class="staff-intro">
      <h2 class="section-title">技师介绍</h2>
      <div class="intro-content">{{ staffInfo.employeeDesc }}</div>
      <div class="cert-list">
        <h3>职业证书</h3>
        <div class="cert-grid">
          <div v-for="cert in staffInfo.certificates" :key="cert.id" class="cert-item">
            <img :src="cert.image" :alt="cert.name">
            <span class="cert-name">{{ cert.name }}</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 服务项目 -->
    <section class="staff-services">
      <h2 class="section-title">擅长项目</h2>
      <div class="service-list">
        <div v-for="service in services" :key="service.serviceId" class="service-item">
          <img :src="service.servicePic" :alt="service.serviceName">
          <div class="service-info">
            <h3>{{ service.serviceName }}</h3>
            <p class="service-desc">{{ service.serviceDetails }}</p>
            <div class="service-price">
              <span class="price">¥{{ service.servicePrice }}</span>
              <span class="time">{{ service.serviceTime }}分钟</span>
            </div>
          </div>
          <button class="book-service-btn">预约</button>
        </div>
      </div>
    </section>

    <!-- 顾客评价 -->
    <section class="staff-comments">
      <div class="comment-header">
        <h2 class="section-title">顾客评价</h2>
        <div class="rating-filter">
          <span 
            v-for="filter in ratingFilters" 
            :key="filter.type"
            :class="['filter-tag', { active: currentRatingFilter === filter.type }]"
            @click="filterComments(filter.type)"
          >
            {{ filter.name }}({{ filter.count }})
          </span>
        </div>
      </div>

      <div class="comment-list">
        <div v-for="comment in filteredComments" :key="comment.id" class="comment-item">
          <div class="comment-user">
            <img :src="comment.userAvatar" :alt="comment.userName">
            <div class="user-info">
              <span class="user-name">{{ comment.userName }}</span>
              <div class="comment-rating">
                <div class="rating-stars">
                  <i v-for="n in 5" :key="n" class="icon-star" :class="{ active: n <= comment.rating }"></i>
                </div>
                <span class="comment-time">{{ comment.time }}</span>
              </div>
            </div>
          </div>
          <div class="comment-content">{{ comment.content }}</div>
          <div v-if="comment.images?.length" class="comment-images">
            <img 
              v-for="image in comment.images" 
              :key="image"
              :src="image"
              @click="previewImage(image)"
            >
          </div>
          <div v-if="comment.reply" class="comment-reply">
            <span class="reply-label">店家回复：</span>
            {{ comment.reply }}
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, computed, reactive, toRefs } from 'vue'
import { useRoute } from 'vue-router';
import{listEmployee} from '@/api/shop/employee'
import {listService} from '@/api/shop/service'
const route = useRoute();
const data=reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    employeeName: null,
    employeeTimeStart: null,
    employeeStatus: null,
    employeeDesc: null,
    employeePic: null,
    shopName: null
  },
  queryServiceParams: {
    pageNum: 1,
    pageSize: 10,
    serviceId: null,
    serviceName: null,
    serviceCategory: null,
    serviceDetails: null,
    servicePic: null,
    serviceTime: null,
    servicePrice: null,
    sold: null,
    shopName: null,
    launchTime: null,
    downTime: null,
    serviceStatus: null
  },
})
const { queryParams,queryServiceParams } = toRefs(data);
// 技师详细信息
const staffInfo = ref({}
  // id: 1,
  // name: '张师傅',
  // avatar: 'https://cyj456.oss-cn-hangzhou.aliyuncs.com/clock/user/avatar/5fe142b7-82e5-4a7f-af11-d304a20dd5ae.png',
  // level: '大师',
  // years: 15,
  // skills: ['推拿', '足疗', '按摩', '经络调理'],
  // rating: 4.9,
  // commentCount: 328,
  // serviceCount: 2536,
  // repeatRate: 85,
  // satisfactionRate: 98,
  // introduction: '从事按摩推拿15年，精通各类推拿手法，对颈椎病、腰椎病等有特殊疗效。曾获得全国推拿技能大赛金奖，具有国家高级推拿师资格证书。',
  // certificates: [
  //   { id: 1, name: '高级推拿师证书', image: 'src/assets/images/banner1.jpg' },
  //   { id: 2, name: '中医按摩师证书', image: 'src/assets/images/banner2.jpg' },
  // ],
  // services: [
  //   {
  //     id: 1,
  //     name: '全身推拿',
  //     description: '采用传统推拿手法，疏通经络，缓解疲劳',
  //     price: 238,
  //     duration: 60,
  //     image: 'src/assets/images/banner3.jpg'
  //   },
  //   // ... 更多服务项目
  // ]
)
const serviceIds = ref([]);
const services = ref([]);
// 获取技师详细信息
function getEmployeeDetail(){
  queryParams.value.employeeName = route.query.employeeName;
  listEmployee(queryParams.value).then(res=>{
    staffInfo.value = res.rows[0];
     getEmployeeServices();
  })
  
}
getEmployeeDetail();
// 获取技师擅长服务信息
function getEmployeeServices(){
  serviceIds.value=staffInfo.value.goodServices.split(',');
  for(let i=0;i<serviceIds.value.length;i++){
    queryServiceParams.value.serviceId = serviceIds.value[i];
    listService(queryServiceParams.value).then(res=>{
      services.value.push(res.rows[0]);

  })
  }
  
}
// 评价筛选
const ratingFilters = ref([
  { type: 'all', name: '全部', count: 328 },
  { type: 'good', name: '好评', count: 320 },
  { type: 'medium', name: '中评', count: 6 },
  { type: 'bad', name: '差评', count: 2 }
])

const currentRatingFilter = ref('all')

const comments = ref([
  {
    id: 1,
    userName: '张三',
    userAvatar: 'https://cyj456.oss-cn-hangzhou.aliyuncs.com/clock/user/avatar/c728d0db-4332-415c-bc5c-7674a94f1fab.png',
    rating: 5,
    content: '技师手法很专业，服务态度也很好，很满意的一次体验！',
    time: '2024-01-15',
    images: ['src/assets/images/comment1.jpg', 'src/assets/images/comment2.jpg'],
    reply: '感谢您的好评，我们会继续保持！'
  },
  // ... 更多评价
])

const filteredComments = computed(() => {
  if (currentRatingFilter.value === 'all') {
    return comments.value
  }
  // 根据评分筛选评价
  const ratingRanges = {
    good: [4, 5],
    medium: [3],
    bad: [1, 2]
  }
  const range = ratingRanges[currentRatingFilter.value]
  return comments.value.filter(comment => range.includes(comment.rating))
})

const filterComments = (type) => {
  currentRatingFilter.value = type
}

// 图片预览
const previewImage = (image) => {
  // 实现图片预览逻辑
  console.log('Preview image:', image)
}
</script>

<style scoped>
/* 修改所有按钮的基础样式 */
button {
  outline: none;  /* 移除点击时的外边框 */
  border: none;  /* 移除边框 */
  -webkit-tap-highlight-color: transparent;  /* 移除移动端点击高亮 */
}

/* 修改预约按钮样式 */
.book-btn {
  padding: 8px 24px;
  background: #ff4d4f;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.book-btn:hover {
  background: #ff7875;
}

.book-btn:active {
  background: #f5222d;
}

/* 修改服务预约按钮样式 */
.book-service-btn {
  padding: 6px 15px;
  background: #ff4d4f;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  align-self: center;
  transition: all 0.3s;
}

.book-service-btn:hover {
  background: #ff7875;
}

.book-service-btn:active {
  background: #f5222d;
}

/* 修改评价筛选标签样式 */
.filter-tag {
  padding: 4px 12px;
  border: 1px solid #ddd;  /* 这个边框保留，因为是设计的一部分 */
  border-radius: 15px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  background: #fff;
}

.filter-tag:hover {
  border-color: #ff4d4f;
  color: #ff4d4f;
}

.filter-tag.active {
  background: #ff4d4f;
  color: #fff;
  border-color: #ff4d4f;
}
.staff-detail {
  padding: 15px;
  background: #f5f5f5;
}

/* 头部基本信息样式 */
.staff-header {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
}

.staff-basic {
  display: flex;
  gap: 20px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.staff-avatar {
  position: relative;
  width: 100px;
  height: 100px;
}

.staff-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.staff-level {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #ff4d4f;
  color: #fff;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 12px;
}

.staff-info {
  flex: 1;
}

.name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.name-row h1 {
  font-size: 24px;
  margin: 0;
}

.years {
  color: #666;
  font-size: 14px;
}

.rating-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.rating-stars {
  color: #ffd700;
}

.rating-score {
  color: #ff4d4f;
  font-weight: 500;
  margin-left: 5px;
}

.comment-count {
  color: #666;
  font-size: 14px;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-tag {
  padding: 4px 12px;
  background: #f5f5f5;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}

.book-btn {
  padding: 8px 24px;
  background: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.book-btn:hover {
  background: #ff7875;
}

/* 服务统计样式 */
.service-stats {
  display: flex;
  justify-content: space-around;
  padding-top: 20px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #ff4d4f;
  margin-bottom: 5px;
}

.stat-label {
  color: #666;
  font-size: 14px;
}

/* 技师介绍样式 */
.staff-intro {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
}

.section-title {
  font-size: 18px;
  margin: 0 0 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.intro-content {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.cert-list h3 {
  font-size: 16px;
  margin: 0 0 10px;
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.cert-item {
  text-align: center;
}

.cert-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 5px;
}

.cert-name {
  font-size: 12px;
  color: #666;
}

/* 服务项目样式 */
.staff-services {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
}

.service-list {
  display: grid;
  gap: 15px;
}

.service-item {
  display: flex;
  gap: 15px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.service-item img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.service-info {
  flex: 1;
}

.service-info h3 {
  font-size: 16px;
  margin: 0 0 8px;
}

.service-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.service-price {
  display: flex;
  align-items: center;
  gap: 15px;
}

.price {
  color: #ff4d4f;
  font-size: 18px;
  font-weight: bold;
}

.time {
  color: #666;
  font-size: 14px;
}

.book-service-btn {
  padding: 6px 15px;
  background: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  align-self: center;
}

/* 评价部分样式 */
.staff-comments {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.rating-filter {
  display: flex;
  gap: 15px;
}

.filter-tag {
  padding: 4px 12px;
  border: 1px solid #ddd;
  border-radius: 15px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.filter-tag:hover {
  border-color: #ff4d4f;
  color: #ff4d4f;
}

.filter-tag.active {
  background: #ff4d4f;
  color: #fff;
  border-color: #ff4d4f;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-item {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.comment-user {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.comment-user img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.user-name {
  font-weight: 500;
}

.comment-rating {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-time {
  color: #999;
  font-size: 12px;
}

.comment-content {
  margin-bottom: 10px;
  line-height: 1.6;
}

.comment-images {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.comment-images img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
}

.comment-reply {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  font-size: 14px;
}

.reply-label {
  color: #ff4d4f;
  font-weight: 500;
}

@media screen and (max-width: 768px) {
  .staff-basic {
    flex-direction: column;
    text-align: center;
  }
  
  .cert-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .service-item {
    flex-direction: column;
  }
  
  .service-item img {
    width: 100%;
    height: 160px;
  }
  
  .book-service-btn {
    width: 100%;
    margin-top: 10px;
  }
}
</style>